<template>
	<view class="p30">
		<!-- <view class="flex-align-center">
			<view style="width: 50%;">
				<view class="card-shadow-box p20 flex-column-center">
					<view class="wh30">
						<image src="/pagesDetail/static/images/meter-1.png" style="width: 30px;height: 30px;">
						</image>
					</view>
					<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.meterMileage, [0, 999999], 1)}}</view>
					<view class="c-info f18">仪表里程(KM)</view>
				</view>
			</view>
			<view style="width: 50%;" class="ml30">
				<view class="card-shadow-box p20 flex-column-center">
					<view class="wh30">
						<image src="/pagesDetail/static/images/meter-3.png" style="width: 30px;height: 30px;">
						</image>
					</view>
					<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.averageSpeed, [0, 150], 1)}}</view>
					<view class="c-info f18">总平均速度(KM/H)</view>
				</view>
			</view>
		</view> -->
		<view class="flex-align-center">
			<view style="width: 50%;">
				<view class="card-shadow-box p20 flex-align-center">
					<view class="wh30">
					<image src="/pagesDetail/static/images/meter-1.png" style="width: 30px;height: 30px;">
					</image>
					</view>
					<view class="flex-column-center flex1">
						<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.meterMileage, [0, 999999], 1)}}</view>
						<view class="c-info f18">仪表里程(km)</view>
					</view>
				</view>
			</view>
			<view style="width: 50%;" class="ml30">
				<view class="card-shadow-box p20 flex-align-center">
					<view class="wh30">
						<image src="/pagesDetail/static/images/meter-3.png" style="width: 30px;height: 30px;">
						</image>
					</view>
					<view class="flex-column-center flex1">
						<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.averageSpeed, [0, 150], 1)}}</view>
						<view class="c-info f18">总平均速度(km/h)</view>
					</view>
		
				</view>
			</view>
		</view>
		<view class="flex-align-center mt30">
			<view style="width: 50%;">
				<view class="card-shadow-box p20 flex-align-center">
					<view class="wh30">
						<image src="/pagesDetail/static/images/meter-4.png" style="width: 30px;height: 30px;">
						</image>
					</view>
					<view class="flex-column-center flex1">
						<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.subtotalMileage1, [0, 9999], 1)}}
						</view>
						<view class="c-info f18">短距离里程表TM(km)</view>
					</view>
				</view>
			</view>
			<view style="width: 50%;" class="ml30">
				<view class="card-shadow-box p20 flex-align-center">
					<view class="wh30">
						<image src="/pagesDetail/static/images/meter-5.png" style="width: 30px;height: 30px;">
						</image>
					</view>
					<view class="flex-column-center flex1">
						<view class="f48 mr10 bold dinbold">{{toFormatVal(odometerDataPoint.subtotalMileage2, [0, 9999], 1)}}
						</view>
						<view class="c-info f18">短距离里程表TA(km)</view>
					</view>

				</view>
			</view>
		</view>
		<view class="mt50 flex-center">
			<view style="width: 210px;">
				<u-subsection :current="curNow" @change="sectionChange" :list="['近1周','近1月']" mode="subsection"
					activeColor="#06B7F3" inactiveColor="red">
				</u-subsection>
			</view>
		</view>

		<view class="card-shadow-box mt30">
			<view class="flex-between">
				<title-bar title="行驶里程"></title-bar>
				<view class="c-info f20">单位：km</view>
			</view>
			<!-- <bar ref="bar" :min="0" :max="450"></bar> -->
			<bar ref="bar"></bar>
		</view>
		<view class="card-shadow-box mt30">
			<view class="flex-between">
				<title-bar title="燃油消耗"></title-bar>
				<view class="c-info f20">单位：L</view>
			</view>
			<!-- <cust-line ref="fuelLine" :min="0" :max="150"></cust-line> -->
			<cust-line ref="fuelLine"></cust-line>
		</view>
		<view class="card-shadow-box mt30">
			<view class="flex-between">
				<title-bar title="行驶速度"></title-bar>
				<view class="c-info f20 flex-row">
					<u-icon name="checkbox-full" color="#FF3400" size="10" :isShowIcon="false"
						customPrefix="iconfontbike iconbike"></u-icon>
					<text class="ml4 mr20">最高车速</text>
					<u-icon name="checkbox-full" color="#06b7f3" size="10" :isShowIcon="false"
						customPrefix="iconfontbike iconbike"></u-icon>
					<text class="ml4 mr20">平均车速</text>
					<view>单位：km/h</view>
				</view>
			</view>
			<cust-line ref="speedLine" :min="0" :max="150"></cust-line>
		</view>
	</view>
</template>

<script>
	import custLine from "@/components/charts/cust-line";
	import Bar from "@/pagesDetail/components/charts/cust-bar";
	import TitleBar from "../../components/title-bar";
	import {
		getTotalMileageCountAPI,
		getSurpluOilCountAPI,
		getCarSpeedCountAPI
	} from "@/api/api/statistics"
	import {
		getNowTime,
		getRangeVal
	} from "@/utils/utils.js"
	import {
		isNull
	} from "../../utils/mqtt.min";
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			custLine,
			Bar,
			TitleBar
		},
		data() {
			return {
				curNow: 0,
			}
		},
		onLoad() {
			this.initData();
		},
		computed: {
			...mapState(["deviceData","odometerDataPoint"])
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
				this.initData();
			},
			requestData(type, key = '', range = [0, 150], fix = 1) {
				let yMax=5;
				let params = {
					carId: this.deviceData.id,
					dimension: 2,
					count: this.curNow == 0 ? 7 : 30,
					endTime: getNowTime()
				}
				let sData = [];
				let categories = [];
				let fun;
				let line1 = [];
				let line2 = [];
				if (type == 1) {
					fun = getTotalMileageCountAPI;
				} else if (type == 2) {
					fun = getSurpluOilCountAPI;
				} else {
					fun = getCarSpeedCountAPI;
				}
				fun(params).then(([err, data]) => {
					//data = data.reverse() || [];
					categories = [];
					data.forEach((item) => {
						if(Number(item.info)<5 && yMax<5){
							yMax = 5;
						}
						let time = item.time;
						categories.push(time);
						let val = type == 2 ? (isNaN(Number(item.info)) ? 0 : Number(item.info)) : this
							.toFormatVal(item.info, range, fix);
						sData.push(val);
						if (type == 3) {
							let max = this.toFormatVal(item.max, range, fix);
							let mean = this.toFormatVal(item.mean, range, fix);
							line1.push(max);
							line2.push(mean)
						}
					})

					let lineData = {
						categories: categories,
						series: [{
							name: '',
							data: sData
						}]
					}
					

					if (key == 'bar' && !lineData.categories.length) {
						lineData.categories = ["", "", "", "", ""];
					}

					if (type == 3) {
						lineData = {
							categories: categories,
							series: [ {
								name: '平均车速',
								data: line2,
							},{
								name: '最高车速',
								data: line1,
							}]
						}
					}
					let max = 0;
					if(type == 3){
						max = Math.max(...line2,...line1);
					}else{
						max = Math.max(...sData);
					}

					if (key) {
						this.setChartData(key, lineData,max);
					}
				})


			},

			setChartData(key, data,max) {
				let ref = this.$refs[key];
				if(max<=5){
					max= 5
					ref.opts.yAxis.data[0].max = max;
					ref.updateOption(ref.opts);
				}
				this.$nextTick(() => {
					ref.updateData(data);
				})
			},

			initData() {
				this.requestData(1, 'bar', [0, 450], 1);
				this.requestData(2, 'fuelLine');
				this.requestData(3, 'speedLine', [0, 150], 1);
			},

			toFormatVal(val, arr, fix = 2) {
				if (val == null || val === '') {
					return '-'
				}
				let n = getRangeVal(val, arr);
				return Number(n).toFixed(fix);
			}
		}
	}
</script>

<style>
</style>
